<template>
	<view class="pg-30">
		<view class="border-rs20 pg-30 bgColor-white">
			<text class="font-30">退款商品</text>
			<view class=""  v-for="(item,index) in goodsInfo.order_list" :key='index'>
				<view class="goodItems d-flex mt-30">
					<view class="">
						<image :src="item.goods_logo" mode=""></image>
					</view>
					<view class="flex-grow1 d-flex flex-d jfy-sb ml-20">
						<text class="text-overflow2">{{item.goods_title}}</text>
						<view class="d-flex jfy-sb" style="margin-bottom: 10rpx;">
							<text class="pay font-24">￥{{item.price_selling}}</text>
							<text class="font-24">x{{item.number_goods}}</text>
						</view>
					</view>
				</view>
				<view class="footerBtn d-flex-yCenter" >
					<text @tap='onGoods(item.order_no,item.id)' v-if="!goodsInfo.refund_all && item.orderRefundFlag==false">售后</text>
					<text @tap='shouhouStats(item)' v-if="item.orderRefundFlag">查看售后状态</text>
					<text class="font-24 textColor999" v-if="!goodsInfo.refund_all&& !item.orderRefundFlag && !item.can_refund">已超出售后时间</text>
				</view>
			</view>
		</view>
		<view class="border-rs20 pg-30 bgColor-white mt-30" v-if="goodsInfo.refund_all">
			<text class="font-30">选择服务类型</text>
			<view class="pg-30" v-if="goodsInfo.refund_all && !goodsInfo.can_refund && !goodsInfo.orderRefundFlag">
				<text class="font-24 textColor999">已超出售后时间</text>
			</view>
			<view class="d-flex-yCenter mt-30" v-if="!goodsInfo.orderRefundFlag">
				<image class="fuIfmg" src="../static/tuihuo.png" mode=""></image>
				<view class="flex-grow1 d-flex-yCenter-sb ml-20" @tap='onGoods(goodsInfo.order_no)'>
					<view class="d-flex flex-d">
						<text>我要退货退款</text>
						<text class="footer font-24 mt-10">已收到货，需要退还收到的货</text>
					</view>
					<u-icon name="arrow-right" color="#000" size="25"></u-icon>
				</view>
			</view>
			<view class="d-flex-yCenter mt-30" v-else>
				<image class="fuIfmg" src="../static/tuihuo.png" mode=""></image>
				<view class="flex-grow1 d-flex-yCenter-sb ml-20" @tap='isStatus(goodsInfo.order_no)'>
					<view class="d-flex flex-d">
						<text>查看售后状态</text>
						<text class="footer font-24 mt-10">已申请售后</text>
					</view>
					<u-icon name="arrow-right" color="#000" size="25"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {http_user_order_refund_after_sale} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				order_no:'',
				goodsInfo:{
					refund_all:''
				}
			}
		},
		onLoad(opens) {
			this.order_no=opens.order_no
		},
		onShow() {
			http_user_order_refund_after_sale({
				data:{
					order_no:this.order_no
				}
			}).then(res=>{
				this.goodsInfo=res.data
				console.log(res);
			})
		},
		methods: {
			shouhouStats(e){
				uni.navigateTo({
					url:'/goodsPackage/Refund-details/Refund-details?refund_order_no='+e.orderRefund.refund_order_no
				})
				console.log(e.orderRefund.refund_order_no);
			},
			onGoods(order_no,id){
				uni.navigateTo({
					url:'/goodsPackage/refund/refund?order_no='+order_no+'&order_list_id='+id
				})
				console.log(order_no);
			},
			isStatus(){
				uni.navigateTo({
					url:'/goodsPackage/Refund-details/Refund-details?refund_order_no='+this.goodsInfo.orderRefund.refund_order_no
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #F5F5F5;
	}

	.goodItems {
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
		}

		.pay {
			color: #CD0101;
		}
	}
	.footerBtn{
		justify-content: flex-end;
		text{
			display: inline-block;
			padding: 8rpx 32rpx;
			font-size: 28rpx;
			border-radius: 12rpx;
			color: #fff;
			background:#FF890B ;
		}
	}
	.fuIfmg {
		width: 40rpx;
		height: 40rpx;
	}

	.footer {
		color: #BABABA;
	}
</style>
